<template>
    <view class="mask flex-center update-info">
        <view v-show="init" class="content botton-radius">
            <image src="../../../static/img/update.png" mode="widthFix" class="content-top-image"></image>
            <view class="content-body">
                <view class="title">
                    发现新版本V{{ version }}
                </view>
                <view class="update-info">
                    <view v-html="msg"></view>
                    为了不影响使用请立即升级
                </view>
                <view class="btn">
                    <image @click="update()" src="../../../static/img/update_btn.png" mode="heightFix"
                        class="update-btn">
                    </image>
                </view>
            </view>
            <!-- <image v-if="!is_mandatory" class="close-img" src="../images/app_update_close.png"
				@click.stop="closeUpdate"></image> -->
        </view>
    </view>
</template>

<script>
    import {
        updateApp,
    } from '@/common/api.js'

    function download(data) {
        if (data.shichang === 1 && !/\.apk$/i.test(data.url)) {
            //去应用市场更新
            plus.runtime.openURL(data.shichangurl);
            plus.runtime.restart();
        } else {
            // 开始下载
            // 创建下载任务
            var dtask = plus.downloader.createDownload(data.url, {
                    filename: "_downloads/"
                },
                function(d, status) {
                    console.log('d', d)
                    console.log('status', status);
                    // 下载完成
                    if (status == 200) {
                        plus.runtime.install(d.filename, {
                            force: false
                        }, function() {
                            //进行重新启动;
                            plus.runtime.restart();
                        }, (e) => {
                            uni.showToast({
                                title: '安装升级包失败:' + JSON.stringify(e),
                                icon: 'none'
                            })
                        });
                    } else {
                        this.tui.toast("下载升级包失败，请手动去站点下载安装，错误码: " + status);
                    }
                });

            let view = new plus.nativeObj.View("maskView", {
                backgroundColor: "rgba(255,255,255,.6)",
                left: ((plus.screen.resolutionWidth / 2) - 45) + "px",
                bottom: "80px",
                width: "90px",
                height: "30px",
                zIndex: 11111
            })
            view.drawText('开始下载', {}, {
                size: '14px',
                color: '#000000'
            });
            view.show()
            dtask.addEventListener("statechanged", (e) => {
                if (e && e.downloadedSize > 0) {
                    let jindu = ((e.downloadedSize / e.totalSize) * 100).toFixed(2)
                    view.reset();
                    view.drawText(jindu + '%', {}, {
                        size: '14px',
                        color: '#000000'
                    });
                }
            }, false);
            dtask.start();
        }
    }
    export default {
        data() {
            return {
                version: '',
                msg: '',
                data: {},
                init: false,
            }
        },
        onShow() {
            plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
                let platform = plus.os.name.toLocaleLowerCase();
                let str = {
                    'platform': platform,
                    'version': widgetInfo.version
                }

                console.log(str);
                updateApp(str).then((res) => {
                    this.init = true;
                    console.log("res");
                    console.log(res);
                    this.version = res.version;
                    this.msg = res.log;
                    this.data = res;
                });
            });
        },
        methods: {
            update() {
                download(this.data);
            }
        }
    }
</script>

<style lang="scss">
    page {
        background: transparent;
    }

    .flex-center {
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        justify-content: center;
        align-items: center;
    }

    .mask {
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, .65);
    }

    .update-info {
        .content-top-image {
            width: 100%;
        }

        .content-body {
            margin-left: 0px;
            margin-right: 0px;
            margin-top: -12rpx;
            background: #fff;
            padding: 24rpx 60rpx 30rpx 60rpx;
            transform: scaleX(99.6%);
            border-bottom-left-radius: 30rpx;
            border-bottom-right-radius: 30rpx;
        }

        .btn {
            margin-top: 40rpx;
            text-align: center;
        }

        .update-btn {
            height: 70rpx;
        }

        .title {
            text-align: center;
            font-size: 19px;
            font-weight: bold;
            margin: 10rpx 0 30rpx 0;
        }

        .update-info {
            font-size: 15px;
        }
    }

    .botton-radius {
        border-bottom-left-radius: 30rpx;
        border-bottom-right-radius: 30rpx;
    }

    .content {
        position: relative;
        top: 0;
        width: 600rpx;
        background-color: #transparent;
        box-sizing: border-box;
        padding: 0 50rpx;
        font-family: Source Han Sans CN;
    }

    .text {
        /* #ifndef APP-NVUE */
        display: block;
        /* #endif */
        line-height: 200px;
        text-align: center;
        color: #FFFFFF;
    }

    .content-top {}

    .content-top-text {
        font-size: 45rpx;
        font-weight: bold;
        color: #F8F8FA;
        position: absolute;
        top: 120rpx;
        left: 50rpx;
        z-index: 1;
    }
</style>